<template>
  <div class="box">
    <div class="commonHeader">
      维修基金使用情况及公益性收入
    </div>
    <div class="content">
      <div
        class="data-box"
        style="height:100%"
      >
        <div class="line-box">
          <i class="t-l-line"></i>
          <i class="l-t-line"></i>
        </div>
        <div class="line-box">
          <i class="t-r-line"></i>
          <i class="r-t-line"></i>
        </div>
        <div class="line-box">
          <i class="b-l-line"></i>
          <i class="l-b-line"></i>
        </div>
        <div class="line-box">
          <i class="b-r-line"></i>
          <i class="r-b-line"></i>
        </div>
        <div class="content-text">
          <el-row
            :gutter="15"
            class="revenue-container"
          >
            <el-col
              :span="12"
              class="text-center revenue-box"
            >
              <span class="revenue">173.05<span class="unit">万元</span></span>
              <p class="revenue-desc">当前维修基金额度</p>
              <p class="tootip"></p>
            </el-col>
            <el-col
              :span="12"
              class="text-center revenue-box"
            >
              <span class="revenue process-revenue ">4.53<span class="unit">万元</span></span>
              <p class="revenue-desc">物业公益性收入总额</p>
              <p class="tootip process-tootip"></p>
            </el-col>
          </el-row>
          <div
            ref="revenueChart"
            class="revenue-chart"
            style="height:60%"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      chart_dom: ''
    }
  },
  mounted() {
    this.init()
    // 监听浏览器尺寸变化,重新渲染图表
    window.addEventListener('resize', this.handleResize, false)
  },
  methods: {
    init() {
      this.chart_dom = echarts.init(this.$refs.revenueChart)
      let option = {
        dataset: {
          source: [
            ['revenue', '维修基金额度', '物业公益性收入'],
            ['第一季度', 1730500, 16000],
            ['第二季度', 1730500, 15000],
            ['第三季度', 1730500, 14300],
            ['第四季度', 0, 0]
          ]
        },
        grid: {
          top: '5%',
          left: '25%',
          bottom: '20%',
          right: '15%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          interval: 600000,
          axisLabel: {
            color: 'rgba(255,255,255,0.6)',
            formatter: function(value, index) {
              let val = (value / 10000).toFixed(0)
              console.log(val)
              return val + '万'
            }
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 2,
              color: 'rgba(255,255,255,0.05)'
            }
          }
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            align: 'right',
            color: 'rgba(255,255,255,0.6)'
          },
          axisLine: {
            lineStyle: {
              width: 2,
              color: 'rgba(255,255,255,0.05)'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '5',
            barGap: '1',
            itemStyle: {
              color: '#3573f1'
            }
          },
          {
            type: 'bar',
            barGap: '1',
            barWidth: '5',
            itemStyle: {
              color: '#00b9a5'
            }
          }
        ]
      }
      this.chart_dom.setOption(option)
    },
    handleResize() {
      this.$nextTick(() => {
        this.chart_dom.resize()
      })
    }
  },
  destroyed() {
    // 移除监听事件
    window.removeEventListener('resize', this.handleResize, false)
  }
}
</script>
<style lang="less" scoped>
.box {
  height: 40%;
  .content {
    padding-top: 0.5rem;
    box-sizing: border-box;
    height: calc(100% - 2rem);
    .content-text {
      height: 100%;
      overflow: hidden;
      .revenue-container {
        overflow: hidden;
        height: 40%;
      }
      .revenue-box {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        height: 100%;
        justify-content: center;
        align-items: center;
        .revenue {
          font-size: 1.5rem;
          font-weight: 700;
          color: #3573f1;
          letter-spacing: 0;
          text-align: center;
          .unit {
            margin-left: 5px;
            color: #fff;
            opacity: 0.6;
            font-size: 12px;
          }
        }
        .process-revenue {
          color: #00b9a5;
        }
        .revenue-desc {
          margin-top: 10px;
          text-align: center;
          width: 60px;
          font-size: 12px;
          opacity: 0.6;
        }
        .tootip {
          margin-top: 5px;
          border-radius: 15px;
          width: 30px;
          height: 5px;
          background-color: #3573f1;
        }
        .process-tootip {
          background-color: #00b9a5;
        }
      }
    }
  }
}
</style>
